<template>
	<view class="page-body">
		<cu-custom bgColor="" :isBack="true" :isTitle="false">
			<block slot="backText" class="titilestyle">{{title}}</block>
		</cu-custom>
		<view class="ae-address">
			<view class="ae-address-item">
				<view class="title">姓名</view>
				<view class="ae-address-item-view">
					<input class="uni-input " placeholder="请输入您的姓名" @input="onKeyInput" data-key="consignee"
						:value="data.consignee" />
				</view>

			</view>


			<view class="ae-address-item">
				<view class="title">电话</view>
				<view class="ae-address-item-view">
					<input class="uni-input" type="number" placeholder="请输入您的电话号码" @input="onKeyInput" data-key="mobile"
						:value="data.mobile" />
				</view>
			</view>
			<view class="ae-address-item">
				<view class="title">学校</view>
				<view class="ae-address-item-view">
					<view class="inputext"><text>{{area.area_name}}</text></view>
				</view>
			</view>
			<view class="ae-address-item">
				<view class="title">地址</view>
				<view class="ae-address-item-view">
					<picker mode="multiSelector" @change="checkAddr" @columnchange="checkDorm" :value="curIndex"
						:range="addressList" range-key="name" style="width: 100%;">
						<view class="inputext"><text>{{address}} </text> <text class="cuIcon-right cuIcon-right"></text>
						</view>
					</picker>
				</view>
			</view>
			<view class="ae-address-item">
				<view class="title">详细</view>
				<view class="ae-address-item-view">
					<input class="uni-input" placeholder="请填写您的详细门牌号或寝室号" @input="onKeyInput" data-key="detail"
						:value="data.detail" />
				</view>
			</view>
			<view class="ae-address-item1" style="">
				<view class="title">默认地址</view>
				<view class="ae-address-right">
					<switch class="blue" @change="onCheck" :checked="data.is_default" color="blue"></switch>
				</view>
			</view>



		</view>
		<view class="addr-btn">
			<text class="save-btn" @click="save">保存地址</text>
			<text class="del-btn" @click="del" v-if="data.address_id > 0">删除地址</text>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				title: "新增地址",
				area: [],
				dormlist: [],
				addressList: [],
				curIndex: [],
				address: '请选择您的地址',
				data: [],
				postData: [],
				shop_id: 0,
				addressData: {
					address_id: "",
					area_id: "",
					consignee: '',
					mobile: '',
					dorm_id: '',
					dorm_pid: -1,
					detail: '',
					is_default: 0,
				}
			}
		},
		onLoad(option) {
			this.shop_id = option.shop_id == 'undefined' ? 0 : option.shop_id
			this.apiRequest('/buyer/getAddress', {
				address_id: option.id,
				area_id: uni.getStorageSync('area_id')
			}).then(res => {
				this.area = res.data.area;
				if (option.id > 0) {
					this.data = res.data
					this.address = this.data.address
					this.postData = this.data
				} else {
					this.data = this.addressData;
					this.postData = this.addressData;
				}
			})
			this.apiRequest('/buyer/getDorm', {
				area_id: uni.getStorageSync('area_id')
			}).then(res => {
				this.curIndex = [0, 0];
				this.dormlist = res.data;
				for (var index in this.dormlist) {
					if (this.dormlist[index]['dorm_id'] == this.data.dorm_pid) {
						this.curIndex[0] = index
						var floor = this.dormlist[index]['floor'];
						for (var key in floor) {
							if (floor[key]['dorm_id'] == this.data.dorm_id) {
								this.curIndex[1] = key
							}
						}
					}
				}
				this.addressList = [this.dormlist, this.dormlist[this.curIndex[0]]['floor']];
			})
		},
		methods: {
			onKeyInput(e) {
				this.postData[e.target.dataset.key] = e.target.value
			},
			onCheck(e) {
				if (e.detail.value.includes("1")) {
					this.postData['is_default'] = 1;
				} else {
					this.postData['is_default'] = 0;
				}
			},
			verify(...dat) {
				let val = true,
					da = dat[1][dat[0]];
				switch (dat[0]) {
					case "consignee": //关于username的验证
						if (da.length == 0) {
							this.showToast("请输入您的姓名");
							val = false;
						} else if (da.length > 20) {
							this.showToast("姓名超出最大字数限制");
							val = false;
						}
						break;
					case "mobile":
						if (!RegExp(/^1[3456789]\d{9}$/).test(da)) {
							this.showToast("手机号格式错误");
							val = false
						}
						break;
					case "dorm_pid":
						
						if (da == -1) {
							this.showToast("请选择地址");
							val = false
						}
						break;
					case "detail":
						if (da.length == 0) {
							this.showToast("请输入详细地址");
							val = false
						} else if (da.length > 30) {
							this, showToast('详细信息超出最大字数限制');
							val = false;
						}
						break;

				}
				return val
			},
			showToast(content) {
				uni.hideLoading();
				uni.showToast({
					title: content,
					icon: "none"
				});

			},
			checkDorm(e) {
				this.curIndex[e.detail.column] = e.detail.value
				if (e.detail.column == 0) {
					this.curIndex[1] = 0
					this.addressList = [this.dormlist, this.dormlist[this.curIndex[0]]['floor']];
				}
			},
			checkAddr(e) {
				this.postData['dorm_id'] = this.addressList[1][this.curIndex[1]].dorm_id
				this.postData['dorm_pid'] = this.addressList[0][this.curIndex[0]].dorm_id
				this.address = this.addressList[0][this.curIndex[0]].name + this.addressList[1][this.curIndex[1]].name
			},
			save() {
				this.postData.area_id = uni.getStorageSync('area_id');
				this.postData.address_id = this.data.address_id;
				let d = {},
					dat = this.postData;
				for (let u in dat) {
					let isPass = this.verify(u, dat);
					if (!isPass) {
						return false;
					}
					(u != "confrom_pass") ? d[u] = dat[u]: "";
				}
				this.apiRequest('/buyer/addressEdit', {
					address_id: this.data.address_id,
					area_id:uni.getStorageSync('area_id'),
					consignee:this.postData['consignee'],
					detail:this.postData['detail'],
					mobile:this.postData['mobile'],
					dorm_id:this.postData['dorm_id'],
					dorm_pid:this.postData['dorm_pid'],
					is_default:this.postData['is_default'],
				}, 1).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					if (res.code == 200) {
						let pages = getCurrentPages();
						let beforePage = pages[pages.length - 2];
						uni.navigateBack({
							delta: 1,
							success: function() {
								beforePage.$vm.upData1("");
							}

						});
					}
				})
			},
			del() {
				this.apiRequest('/buyer/addressDel', {
					address_id: this.data.address_id,
				}, 1).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none',
						success: function() {
							if (res.code == 200) {
								let pages = getCurrentPages();
								let beforePage = pages[pages.length - 2];
								uni.navigateBack({
									delta: 1,
									success: function() {
										beforePage.$vm.upData1("");
									}
								
								});
							}
						}
					})
				})
			}
		},
	}
</script>

<style>
	.addr-btn text {
		height: 100upx;

	}

	.ae-address {
		width: 90%;
		margin-left: 5%;
		background: #FFFFFF;
		box-shadow: 0px 0px 10upx 0px rgba(0, 0, 0, 0.05);
		border-radius: 20upx;
		padding: 20upx;
	}

	.ae-address-item {
		border-bottom: 2upx #F2F2F2 solid;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		background-color: #FFFFFF;
		display: flex;
		height: 100upx;
		align-items: center;
		position: relative;
	}

	.ae-address-right {
		position: absolute;
		float: right;
		right: 0;
	}

	.ae-address-item1 {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		background-color: #FFFFFF;
		display: flex;
		height: 100upx;
		align-items: center;
	}

	.title {
		font-size: 32upx;
		font-family: PingFang SC;
		font-weight: 600;
		color: #333333;
	}

	.ae-address-item-view {
		width: 82%;
		margin-left: 2%;

	}

	.ae-address-item .title {
		width: 16%;
		line-height: 78rpx;
	}

	,
	.ae-address-item .inputext {
		line-height: 78rpx;
		font-size: 28rpx;
		position: relative;
	}

	.cuIcon-right {
		position: absolute;
		float: right;
		right: 0;
	}

	.save-btn,
	.del-btn {
		width: 90%;
		margin: 30upx auto;
		display: block;
		height: 100upx;
		line-height: 100upx;
		border-radius: 20rpx;
		text-align: center;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 500;

	}

	.save-btn {
		background: #1270e0;
		color: #FFFFFF;
	}

	.del-btn {
		color: #999999;
	}

	.uni-input {
		width: 100%;
	}
</style>
